// formMaking
.simple-card-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;

    h3 {
        margin-bottom: 10px;
        margin-left: 20px;
    }

    .desc {
        margin-left: 20px;
    }

    .card-svg {
        background: url(../iconfont/wave1.svg) -10px 0;
        width: 200%;
        position: absolute;
        height: 48px;
        bottom: 0;
        background-size: contain;
    }

    &:hover {
        .card-svg {
            left: -100%;
            animation: water-right 3s infinite linear;
        }
    }
}

@keyframes water-right {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }

    50% {
        transform: translateX(25%) translateZ(0) scaleY(1.15)
    }

    100% {
        transform: translateX(50%) translateZ(0) scaleY(1)
    }
}

.avatar-card-container {
    width: 100%;
    height: 100%;

    .top-container {
        border-radius: 5px;
        padding: 10px 0 20px;

        .header {
            padding: 10px 15px 30px;
            display: flex;

            .avatar {
                width: 60px;
                height: 60px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 5px;
            }

            h3 {
                margin-top: 10px;
            }
        }

        .item-content {
            display: flex;
            justify-content: space-around;

            li {
                text-align: center;
                flex: 1;
                position: relative;

            }

            .middle::after {
                content: '';
                position: absolute;
                left: 0;
                top: 24px;
                height: 20px;
                width: 1px;
                background: #fff;
            }

            .middle::before {
                content: '';
                position: absolute;
                right: 0;
                top: 24px;
                height: 20px;
                width: 1px;
                background: #fff;
            }
        }
    }

    .link-cell {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background: #fff;

        i {
            margin-top: 10px;
        }
    }
}

.progress-card-container {
    padding: 10px;

    .card-title {
        margin-bottom: 5px;
    }

    .desc {
        color: #666;
        margin-bottom: 10px;
    }

    .info-content {
        display: flex;
        margin-bottom: 10px;

        .avatar {
            width: 70px;
            height: 70px;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 5px;
        }
    }

    .progress-wrap {
        margin: 5px 0;
    }
}

.weixin-card-container {
    padding: 10px;
    display: flex;

    .avatar {
        width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 10px;
    }

    .bd_content {
        flex: 1;
    }

    .foot_content{
        width: 100px;
    }
}